<template>
  <!--列表-->
  <div style="margin-top: 50px">
    <el-button type="primary" @click="useradd">
      添加预约Add appointment<el-icon class="el-icon--right"
        ><ArrowRight
      /></el-icon>
    </el-button>
    <el-table :data="resterDate" style="width: 100%" height="200">
      <el-table-column
        prop="userid"
        label="身份证号"
        width="150"
        align="center"
      />
      <el-table-column prop="user.name" label="姓名" width="60" align="center">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>姓名: {{ scope.row.user.name }}</div>
              <div>电话号码: {{ scope.row.user.telephone }}</div>
              <div>接种针数: {{ scope.row.user.whether }}</div>
              <div>居住地址: {{ scope.row.user.address }}</div>
            </template>
            <template #reference>
              <el-tag> {{ scope.row.user.name }} </el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="user.telephone" label="电话号码" width="180" align="center"/>
    <el-table-column prop="user.whether" label="接种针数" width="80" align="center"/> -->
      <el-table-column
        prop="vaccinid"
        label="疫苗编号"
        width="120"
        align="center"
      />
      <el-table-column
        prop="vaccin.vname"
        label="疫苗名称"
        width="150"
        align="center"
      >
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>疫苗名称: {{ scope.row.vaccin.vname }}</div>
              <div>疫苗等级: {{ scope.row.vaccin.vrank }}</div>
              <div>疫苗类型: {{ scope.row.vaccin.vsort }}</div>
              <div>生产公司: {{ scope.row.vaccin.maker }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.vaccin.vname }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="vaccin.vrank" label="疫苗等级" width="80" align="center"/>
    <el-table-column prop="vaccin.vsort" label="疫苗类型" width="80" align="center"/>
    <el-table-column prop="vaccin.maker" label="疫苗生产企业" width="250" align="center"/> -->
      <el-table-column
        prop="jabnum"
        label="接种针数"
        width="80"
        align="center"
      />
      <el-table-column
        prop="userbody"
        label="身体状况"
        width="80"
        align="center"
      />
      <el-table-column
        prop="isallergy"
        label="是否有过敏史"
        width="120"
        align="center"
      >
        <!-- 根据表中的值0和1生成一个按钮 -->
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.isallergy"
            inline-prompt
            active-color="#6495ED"
            inactive-color="#B0C4DE"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="adress"
        label="预约地址"
        width="160"
        align="center"
      />
      <el-table-column
        prop="reservationtime"
        label="预约时间"
        width="180"
        align="center"
      />
      <el-table-column
        prop="state"
        fixed="right"
        label="完成状态"
        width="80"
        align="center"
      >
        <!-- 根据表中的值0和1生成一个按钮 -->
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.state"
            inline-prompt
            active-color="#409EFF"
            inactive-color="#E6A23C"
            active-text="是"
            inactive-text="否"
            :active-value="0"
            :inactive-value="1"
            disabled
            @change="isshow(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160" align="center">
        <template #default="scope">
          <el-button type="warning" size="small" @click="useredit(scope.row)"
            >查看编辑</el-button
          >
          <el-button type="danger" size="small" @click="delthedate(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 编辑或者添加的弹窗 -->
  <el-dialog title="预约疫苗接种" v-model="dialogFormVisible" width="50%">
    <el-form :model="form" size="default" :rules="rules" ref="form">
      <el-row>
        <el-col :span="18">
          <el-form-item label="身份证号" label-width="100px" prop="userid">
            <el-input
              v-model="form.userid"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="疫苗编号" label-width="100px" prop="vaccinid">
            <el-input
              v-model="form.vaccinid"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="接种针数" label-width="100px" prop="jabnum">
            <el-input
              v-model="form.jabnum"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="健康水平" label-width="100px" prop="userbody">
            <el-input v-model="form.userbody" autocomplete="off"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="是否有过敏史"
            label-width="100px"
            prop="isallergy"
          >
            <el-select v-model="form.isallergy">
              <el-option label="1 (是)" value="1" />
              <el-option label="0 (否)" value="0" />
            </el-select> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="接种地址" label-width="100px" prop="adress">
            <el-input
              v-model="form.adress"
              autocomplete="off"
            ></el-input> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            label="接种时间"
            label-width="100px"
            prop="reservationtime"
          >
            <el-date-picker
              v-model="form.reservationtime"
              type="datetime"
              placeholder="选择日期和时间"
              :size="size" /></el-form-item></el-col
      ></el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="saveData('form')"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Order",
  data() {
    return {
      userid: 0,
      dialogFormVisible: false, //信息弹出框是否展示
      resterDate:[],
      localinfo:
        "https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      UserDate: {},
      form: {
        id: "",
        userid: "",
        vaccinid:"",
        jabnum:"",
        userbody:"",
        adress:"",
        reservationtime:"",
      },
    };
  },
  methods: {
    getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem("token");
      // console.log(token);
      this.$http.post("/inoculations/user/getTokenId", token).then((res) => {
        if (res.statusCode == "200") {
          this.UserDate = res.data;
          this.userid = res.data.idcard;
          this.getReservationAll();
          // console.log( this.userid);
        }
      }).catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    // 获取用户预约信息
    getReservationAll() {
      this.$http
        .get("/inoculations/reservation/pageall", {
          params: {
            pageNum: 1,
            pageSize: 5,
            userid: this.userid,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            // this.total = res.data.total;
            this.resterDate = res.data.records;
            console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    // 编辑
    useredit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
     // 新建文章
    useradd() {
      this.form.id="";
        this.form.userid = this.userid;
        this.form.vaccinid="";
        this.form.jabnum="";
        this.form.userbody="";
        this.form.adress="";
        this.form.reservationtime="";
      this.dialogFormVisible = true;
    },
    //用于数据的添加和更新
    saveData() {
      this.$http
        .post("/inoculations/reservation/save", this.form)
        .then((res) => {
          if (res.statusCode == "200") {
            ElMessage({
              message: "成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getuserDate();
          }
        })
        .catch(() => {
          ElMessage.error("失败！");
        });
    },
    // 删除
    delthedate(id) {
      ElMessageBox.confirm("是否删除选中数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          let token = localStorage.getItem("token");
          this.$http
            .delete("/inoculations/reservation/del/" + id, token)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "删除成功！",
                  type: "success",
                });
                this.getuserDate();
              }
            })
            .catch(() => {
              ElMessage.error("删除失败！");
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消！",
          });
        });
    },
  },
  created() {
    this.getuserDate();
  },
};
</script>

<style></style>
